<template>
  <div :class="props.isFixed ? 'img-tools-fixed' : 'img-tools'">
    <div class="operate">
      <span class="img-change">
        <span
          :class="{ disabled: props.current <= 1 }"
          class="icon left-arrow"
          @click="changeCurrentImg('prev')"
        ></span>
        <span class="icon page">{{ props.current }}/{{ props.total }}</span>
        <span
          :class="{
            disabled: props.total <= 1 || props.current === props.total
          }"
          class="icon right-arrow"
          @click="changeCurrentImg('next')"
        ></span>
      </span>
      <template v-if="props.isFixed">
        <span class="icon enlarge" @click="emits('scale', 'enlarge')"></span>
        <span class="icon reduce" @click="emits('scale', 'reduce')"></span>
        <span class="icon" @click="emits('recover')">1:1</span>
        <span class="icon left-rotate" @click="emits('rotate', 'left')"></span>
      </template>
      <span class="icon right-rotate" @click="emits('rotate', 'right')"></span>
      <span
        v-if="!props.isFixed"
        class="icon full-screen"
        :class="{ 'full-screen-close': props.isFullScreen }"
        @click="emits('full-screen')"
      ></span>
    </div>
    <div class="student-change"></div>
  </div>
</template>
<script setup>
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  current: {
    type: Number,
    default: 1
  },
  isFixed: {
    default: false,
    type: Boolean
  },
  isFullScreen: {
    default: false,
    type: Boolean
  }
})
const emits = defineEmits([
  'change-img',
  'scale',
  'rotate',
  'full-screen',
  'recover'
])
const changeCurrentImg = page => {
  if (page === 'next') {
    if (props.total <= 1 || props.current === props.total) return
  } else {
    if (props.current <= 1) return
  }
  emits('change-img', page)
}
</script>
<style lang="less" scoped>
.img-tools-fixed {
  z-index: 999;
  position: fixed;
  left: calc(50% - 223px);
  bottom: 116px;
}

.operate {
  background: rgba(4, 11, 26, 0.75);
  border-radius: 12px;
  width: 446px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 56px;
}
</style>

<style lang="less" scoped>
.img-tools {
  z-index: 999;
  .operate {
    background: rgba(4, 11, 26, 0.75);
    border-radius: 12px;
    width: 277px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 56px;
  }
}
</style>

<style lang="less" scoped>
.icon {
  color: #fff;
  width: 24px;
  height: 24px;
  display: inline-block;
  cursor: pointer;

  &:active {
    opacity: 0.4;
  }

  &.disabled,
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.img-change {
  width: 165px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.enlarge {
  background: url('@/assets/images/comment/enlarge.png') no-repeat center/cover;
}

.reduce {
  background: url('@/assets/images/comment/reduce.png') no-repeat center/cover;
}

.left-arrow {
  background: url('@/assets/images/comment/img-left.png') no-repeat center/cover;
}

.right-arrow {
  background: url('@/assets/images/comment/img-right.png') no-repeat
    center/cover;
}

.left-rotate {
  background: url('@/assets/images/comment/rotate-left.png') no-repeat
    center/cover;
}

.right-rotate {
  background: url('@/assets/images/comment/rotate-right.png') no-repeat
    center/cover;
}

.full-screen {
  background: url('@/assets/images/comment/full-screen.png') no-repeat
    center/cover;

  &.full-screen-close {
    background: url('@/assets/images/comment/full-screen-close.png') no-repeat
      center/cover;
  }
}
</style>
